$(document).ready(Init);

function Init() {
    var responder = $("span.balance");
    var currentBalance = responder.html();    
    responder.visualcounter({count: currentBalance, length: 5});
    $('.visual-count').append("<div class=\"balance-tools\"><a title='refill balance' class=\"refill iframe\" href=\"/frostcore/iframes/refill_balance.php\">+</a><a href=\"javascript:;\" class=\"refresh\" title='refresh balance'>R</a></div>");
    $(".refresh").click(function() {
        $.ajax({
            type: "POST",
            url: "/frostcore/actions/getbalance.php",
            dataType: "text",
            beforeSend: function() {
                responder.html("...")
            },
            success: function(resp) {                
                responder.html(resp)
                responder.visualcounter("update", resp);
            }
        });
    });
    setInterval(function() {
        $.ajax({
            type: "POST",
            url: "/frostcore/actions/getbalance.php",
            dataType: "text",
            success: function(resp) {
                //resp = Math.random()*1000;
                if(currentBalance*1 != resp*1){
                    responder.html(resp);
                    responder.visualcounter("update", resp);
                }
            }
        });
    }, 2000);
}

var visualcounter = {
    options: {
        count: 0,
        length: 6
    },
    _create: function() {
        this.element.hide();
        this.counter = this.getCounter();
        this.counter.insertAfter(this.element);
        this.update(this.options.count);
    },
    
    getCounter: function(){
        var counter = $("<div class=\"visual-count gradient\">");
        for (var i = 0; i < this.options.length; i++) {
            counter.append(this.getScroller().addClass("int"));
        }
        counter.append(this.getScroller(true));
        counter.append(this.getScroller().addClass("float"));
        counter.append(this.getScroller().addClass("float"));
        return counter;
    },
    
    getScroller: function(isPoint) {
        var scroller = $("<div class=\"scroller\">");
        var digit = "<div class=\"digit gradient\">";
        if (isPoint) {
            scroller.append($(digit).html(".").addClass("point"));
        } else {
            for (var i = 0; i < 10; i++) {
                scroller.append($(digit).html(i));
            }
        }
        return scroller;
    },
    update: function(count) {        
        if(count%10 == 0){
            count += ".00";
        }else{
            count = count.toString();
        }        
        var pattern = /(\d+)\.(\d+)/;
        var split = pattern.exec(count);
        var int = split[1];
        if(int.length != this.options.length){
            for(var n = int.length; n < this.options.length; n++){
                int = "0"+int;
            }
        }
        var float = split[2];        
        var shift = this.counter.height();
        
        var scrollersInt = this.counter.children(".scroller.int");
        var scrollersFloat = this.counter.children(".scroller.float");
        
        for (var i = 0; i < int.length; i++) {
            var index = this.options.length-i-1;
            var num = int[int.length-i-1];
            scrollersInt.eq(index).animate({top: -num * shift}, 1000);            
        }
        
        if (float.length) {
            scrollersFloat.eq(0).animate({top: -float[0] * shift}, 1000);
        }
        if (float.length > 1) {
            scrollersFloat.eq(1).animate({top: -float[1] * shift}, 1000);
        }
    }
}

$.widget("frost.visualcounter", visualcounter);